<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <STYLE>
        #ul {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            border: 1px solid transparent;
            list-style: none;
        }

        .active {
            border: 1px solid red !important;
        }
    </STYLE>
</head>

<body>
    <ul id="ul" class="one two three">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
    </ul>
</body>
<script>
    var liList = document.querySelectorAll('#ul li')

    // console.log(liList[0])
    //     for (var i = 0; i < liList.length; i++) {
    //         console.log(liList[i]);
    //     }

    //     for (var i in liList) {
    //         console.log(liList[i]);
    //     }
    // console.dir(liList)

    liList.forEach(function (item, index) {
        console.log(item)
        console.log(index)
    })
    liList[0].textContent=12332199
    var arr = Array.from(liList)
</script>

</html>